[Editor] CodePen / VS Code 常用快速鍵

第 12 屆 iThome 鐵人賽

DAY 2

Modern Web

12th鐵人賽 vs code codepen editor hotkey

140390 瀏覽

開發推薦使用 Visual Studio Code ；另外可以使用線上即時渲染結果的編輯器 Codepen，用於小練習 / 快速試調 / 快速分享：

Codepen

使用線上編輯器可快速編輯 HTML / CSS / JavaScript，即時瀏覽網頁畫面，方便快速學習，例如查看教程時可以一邊進行實作練習，個人最常用的是 Codepen。( ~~相信你點開就會用了吧！我就不教學啦！~~ )

其他類似的線上編輯器服務：

工欲善其事必先利其器，好的 Editor / IDE 讓你開發速度加倍速，爛的編輯器讓你倒退嚕。
再把快速鍵的手感練起來，整個寫 Code 速度就是快的不要不要的，沒有滑鼠也能飛起來！（~~是要飛去哪啦！？~~）

Visual Studio Code ( 簡稱 VS Code ) 跟 Sublime 都是目前滿熱門的編輯器。本系列教學以 VS Code 為主。

選擇 VS Code 主要原因:

嘿啦～反正就這樣。直接送上 VS Code 下載傳送門

相信你載了之後摸個幾下就會使用了吧～我假設你秒會開啟檔案/開啟資料夾新增／編輯檔案囉！（超不負責任的教學文XD）。那就接著分享我個人常用的快速鍵：

Hotkey	Mac	Windows	Remark
開啟文件	`Cmd` + `O`	`Ctrl` + `O`	-
開啟資料夾	`Cmd` + `K` + `L`	`Ctrl` + `K` + `L`	-
儲存文件	`Cmd` + `S`	`Ctrl` + `S`	-
儲存所有文件	`Cmd` + `Option` + `S`	`Ctrl + k` 　 `S`	-
另存新檔	`Cmd` + `Shift` + `S`	`Ctrl` +`Shift` + `S`	-
開新檔案	`Cmd` + `Ｎ`	`Ctrl` + `Ｎ`	-
開新VSCode視窗	`Cmd` + `Shift` + `Ｎ`	`Ctrl` + `Shift` + `Ｎ`	-
關閉檔案/關閉窗格	`Cmd` + `W`	`Ctrl` + `W` 或 `Ctrl` + `F4`	-
關閉所有檔案	`Cmd + ｋ` `Cmd` + `W`	`Ctrl + k` 　`Ctrl + W`	-
關閉整個 VS Code	`Cmd` + `Shift` + `W`	`Ctrl` + `Shift` + `W`	-
快速搜尋檔案並開啟	`Cmd` + `P`	`Ctrl` + `P`	註1
命令列	`F1` 或`Cmd` + `Shift` + `P`	`F1` 或 `Ctrl` + `Shift` + `P`	註1

備註

Hotkey	Mac	Windows	Remark
[VS Code] 放大	`Cmd` + `+`	`Ctrl` + `+`	-
[VS Code] 縮小	`Cmd` + `Shift` + `+`	`Ctrl` + `-`	-
[Scroll Page ] 往上滾 / 往下滾	`Cmd` + `↑` / `↓`	`Ctrl` + `↑` / `↓`	-
[面板開/關] 左側欄	`Cmd` + `B`	`Ctrl` + `B`	-
[面板開/關] 插件	`Cmd` + `Shift` + `x`	`Ctrl` + `Shift` + `X`	-
[面板開/關] 終端機	`Cmd` + `	`Ctrl` + `	-
[面板控制] 新開終端機	`Cmd` + `Shift` + `\`	`Ctrl` + `Shift` + `	-
[面板控制] 分割視窗方式新開終端機	`Cmd` + `\`	`Ctrl` + `Shift` + `5`	-
[面板開/關] 下方面版	`Cmd` + `J`	`Ctrl` + `J`	-
[切換開啟中的檔案] 當前窗格的	`Cmd` + `Shift` + `[` / `]`	`Alt` + `→` / `←`	-
[切換開啟中的檔案] 列表往下選	`Ctrl` + `tab`	`Ctrl` + `tab`	-
└—————————— 往上選	`Ctrl` + `Shift` + `tab`	`Ctrl` + `Shift` + `tab`	-
[切換檔案] 所在窗格的檔案	`Control` + `1` / `2` ...	`Alt` + `1` / `2` ...
[切換檔案] 切換/新增第Ｎ個窗格	`Cmd` + `1` / `2` ...	`Ctrl` + `1` / `2` ...	註1
[文檔檢視] 自動折行檢視	`option` + `Z`	`Alt` + `Z`	註2
用戶設置	`Cmd` + `,`	`Ctrl` + `,`
快速鍵設置	`Cmd + K` `Cmd + S`	`Ctrl + K` `Ctrl + S`

備註

Hotkey	Mac	Windows	Remark
復原	`Cmd` + `Z`	`Ctrl` + `Z`	-
重做	`Cmd` + `Shift` + `Z`	`Ctrl` + `Shift` + `Z`	-
剪下	`Cmd` + `X`	`Ctrl` + `X`	註1
複製	`Cmd` + `C`	`Ctrl` + `C`	註1
貼上	`Cmd` + `V`	`Ctrl` + `V`	-
[刪除] 該行	`Cmd` + `Shift` + `K`	`Ctrl` + `Shift` + `K`	多行也適用
[刪除] 該行游標之後的文字	`Ctrl` + `K`		-
[移動] 往上／下行移	`Option` + `↑` / `↓`	`Alt` + `↑` / `↓`	多行也適用
[複製] 往上／下複製	`Option` + `Shift` + `↑` / `↓`	`Alt` + `Shift` + `↑` / `↓`	多行也適用
[縮排] 往後	`Cmd` + `]` 或 `tab`	`tab]`
[縮排] 往前	`Cmd` + `[` 或 `Shift` + `tab]`	`Shift` + `tab]`
註解	`Cmd` + `/`	`Ctrl` + `/`
文件自動排版	`Alt` + `Shift` + `F`	`Alt` + `Shift` + `F`	註2

備註

Hotkey	Mac	Windows	Remark
[跳至] 畫面上的首行/末行	`Fn` + `↑` / `↓`		-
[跳至] 文件第 1 行	`Cmd` + `↑`	`Ctrl` + `Home`	-
└———— 最後 1 行	`Cmd` + `↓`	`Ctrl` + `End`	-
[跳至] 目前行最前面	`Cmd` + `←`		-
└————— 最後面	`Cmd` + `→`		-
[選取] 至目前行最前面	`Cmd` + `Shift` + `←`		-
└—————— 最後面	`Cmd` + `Shift` + `→`		-
[選取] 向下選取相同字	`Cmd` + `D`	`Ctrl` + `D`	選取字時按.註2
[選取] 選取所有相同字	`Cmd` + `Shift` + `L`	`Ctrl` +`Shift` + `L`	選取字時按
[跳至] 前 / 後一個字	`Option` + `←` / `→`		-
[跳至] 更動處下一個	`Option` + `F5`	`Alt` + `F5`	-
└————— 上一個	`Option` + `Shift` + `F5`	`Alt` + `Shift` + `F5`	-
[跳至] 該定義	`F12`	`F12`	註1

備註

Hotkey	Mac	Windows	Remark
[搜尋] 全專案	`Cmd` + `Shift` + `F`	`Ctrl` + `Shift` + `F`	左側搜尋/取代面板
[搜尋] 特定資料夾	`Shift` + `Option` + `F`	`Shift` + `Alt` + `F`	左側選取資料夾後按
[搜尋] 當前文檔	`Cmd` + `F`	`Ctrl` + `F`	可先選字再按鍵
└ 選至下一個	`Enter` 或 `F3`	`Enter` 或 `Shift` + `F3`	-
└ 選至上一個	`Shift` + `Enter`	`Shift` + `Enter`	-
└ 全選	`Option` + `Enter`	`Alt` + `Enter`	-
[取代] 目前文檔	`Cmd` +`Option` + `F`	`Ctrl` + `H`	可先選字再按鍵
└逐一取代	`Enter`	`Enter`	目前文檔取代結果時按
[取代] 全專案	`Cmd` + `Shift` + `H`	`Ctrl` + `Shift` + `H`	左側搜尋/取代
└ 進階篩選欄	`Cmd` + `Shift` + `J`	`Ctrl` + `Shift` + `J`	在搜尋/取代面板時按
└全部取代	`Cmd` +`Option` + `Enter`	`Ctrl` + `Alt` + `Enter`	列表取代結果時按

Hotkey	Mac	Windows	Remark
以OS檔案總管開啟該檔所屬資料夾	`Cmd` +`Option` + `R`	`Shift` + `Alt` + `R`	-
複製該檔相對路徑	`Cmd` +`Option` + `C`	`Ctrl + k` 　`Ctrl + Shift + C`	備註1
複製該檔絕對路徑	`Cmd` +`Option` + `Shift` + `C`	`Shift` + `Alt`+ `C`	備註1